<template>
  <div :class="myStyle">
    <div class="topNav">
      <p>Pinned</p>
      <el-button @click.stop="toAllApps">All apps<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </div>
    <!-- pinned 列表 -->
    <div class="pinnedList">
      <div v-for="(item,index) in pinnedData" :key="index" @click.stop='openApp(item.name)'>
        <img :src="item.url" alt="">
        <p>{{item.name}}</p>
      </div>
    </div>
    <!-- recommended列表 -->
    <div class="topNav">
      <p>Recommended</p>
    </div>
    <div class="recommend">
      <div class="item" v-for="(item,index) in recommendData" :key="index">
        <img :src="item.url" alt="">
        <div>
          <h3>{{item.title}}</h3>
          <p>{{item.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import {useStore} from 'vuex'
export default {
  setup(props,{emit}){
    const store = useStore()
    const pinnedData = [{
      url: require('@/assets/img/icon/edge.png'),
      name: 'Edge'
    },{
      url: require('@/assets/img/icon/winWord.png'),
      name: 'Word'
    },{
      url: require('@/assets/img/icon/powerpoint.png'),
      name: 'PowerPoint'
    },{
      url: require('@/assets/img/icon/onenote.png'),
      name: 'OneNote'
    },{
      url: require('@/assets/img/icon/mail.png'),
      name: 'Mail'
    },{
      url: require('@/assets/img/icon/todo.png'),
      name: 'To Do'
    },{
      url: require('@/assets/img/icon/store.png'),
      name: 'Store'
    },{
      url: require('@/assets/img/icon/photos.png'),
      name: 'Photos'
    },{
      url: require('@/assets/img/icon/yphone.png'),
      name: 'Your Phone'
    },{
      url: require('@/assets/img/icon/notepad.png'),
      name: 'Notepad'
    },{
      url: require('@/assets/img/icon/board.png'),
      name: 'White Board'
    },{
      url: require('@/assets/img/icon/calculator.png'),
      name: 'Calculator'
    },{
      url: require('@/assets/img/icon/calender.png'),
      name: 'Calender'
    },{
      url: require('@/assets/img/icon/twitter.png'),
      name: 'Twitter'
    },{
      url: require('@/assets/img/icon/spotify.png'),
      name: 'Spotify'
    },{
      url: require('@/assets/img/icon/code.png'),
      name: 'VS Code'
    },{
      url: require('@/assets/img/icon/terminal.png'),
      name: 'Terminal'
    },{
      url: require('@/assets/img/icon/github.png'),
      name: 'Github'
    }]
    const recommendData = [{
      url: require('@/assets/img/icon/mail.png'),
      title: 'Mail',
      desc: 'Just Now'
    },{
      url: require('@/assets/img/icon/github.png'),
      title: 'GitHub',
      desc: '3h ago'
    },{
      url: require('@/assets/img/icon/twitter.png'),
      title: 'Twitter',
      desc: '1h ago'
    },{
      url: require('@/assets/img/icon/code.png'),
      title: 'VS Code',
      desc: '46m ago'
    },{
      url: require('@/assets/img/icon/terminal.png'),
      title: 'Terminal',
      desc: '5h ago'
    },{
      url: require('@/assets/img/icon/spotify.png'),
      title: 'Spotify',
      desc: '3h ago'
    }]
    const myStyle = reactive({
      box: true,
      checkStyle: false
    })
    const toAllApps = () => {
      emit('changeTag')
    }
    const openApp = val => {
      store.dispatch(`desktop/change${val}`)
    }
    return {
      pinnedData,
      recommendData,
      myStyle,
      toAllApps,
      openApp
    }
  }
}
</script>

<style lang='scss' scoped>
.box{
  font-size: 12px;
  .topNav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #666;
    .el-button{
      height: auto;
      min-height: auto;
      background: rgba(255, 255, 255, 0.9);
      padding: 5px 8px;
      border-radius: 3px;
      font-size: 12px;
      color: #333;
      .el-icon--right{
        margin-left: 3px;
      }
    }
  }
}
.pinnedList{
  width: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
  margin-bottom: 10px;
  &>div{
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    transition: background .5s;
    cursor: pointer;
    &:hover{
      background: rgba(255, 255, 255, 0.5);
    }
    p{
      width: 24px;
      display: flex;
      color: #2f2f2f;
      margin-top: 6px;
      font-weight: 500;
      font-size: 0.5em;
      text-align: center;
      white-space: nowrap;
      justify-content: center;
    }
    &:nth-child(6n+1) {
      width: 10%;
      align-items: flex-start;
      &:hover{
        width: 14.45%;
        margin-left: -4.45%;
        align-items: center;
      }
    }

    &:nth-child(6n) {
      width: 10%;
      align-items: flex-end;
      &:hover{
        width: 14.45%;
        margin-right: -4.45%;
        align-items: center;
      }
    }
  }
  img{
    width: 24px;
  }
}
.recommend{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 15px;
  .item{
    width: 40%;
    height: 45px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    div{
      text-align: left;
      h3{
        font-size: 12px;
        font-weight: 600;
        color: #555;
      }
      p{
        font-size: 10px;
        color: #666;
      }
    }
    img{
      height: 50%;
      margin-right: 16px;
    }
  }
}
</style>